<script lang="ts" setup>
import screenfull from "screenfull"

const props = defineProps({
    /** 全屏的元素，默认是 html */
    element: {
        type: String,
        default: "html"
    },
    /** 打开全屏提示语 */
    openTips: {
        type: String,
        default: "全屏"
    },
    /** 关闭全屏提示语 */
    exitTips: {
        type: String,
        default: "退出全屏"
    }
})

const tips = ref<string>(props.openTips)
const isFullscreen = ref<boolean>(false)

const click = () => {
    const dom = document.querySelector(props.element) || undefined
    if (!screenfull.isEnabled) {
        window.alert("您的浏览器无法工作")
        return
    }
    screenfull.toggle(dom)
}

const change = () => {
    isFullscreen.value = screenfull.isFullscreen
    tips.value = screenfull.isFullscreen ? props.exitTips : props.openTips
}

screenfull.on("change", change)

onUnmounted(() => {
    if (screenfull.isEnabled) {
        screenfull.off("change", change)
    }
})
</script>

<template>
    <v-btn icon @click="click" >
        <v-icon :icon="`${isFullscreen ? 'mdi-monitor' : 'mdi-overscan'}`" v-bind="props"></v-icon>
        <v-tooltip activator="parent" location="bottom">{{ isFullscreen ? props.exitTips : props.openTips }}</v-tooltip>
    </v-btn>
</template>


